<!DOCTYPE html>
<html xmlns:th="http://schemas.xmlsoap.org/wsdl/">
	<head>
		<meta charset="utf-8" />
		<title th:text="${centreName} == null? '后台管理系统': ${centreName} + '后台管理系统'">${centreName} == null? '后台管理系统': ${centreName} + '后台管理系统'</title>
		 <link href="css/login1.css" rel="stylesheet">
	</head>
	<body class="login-body" id="login-body-id">
	    <input type="hidden" id="loginBgImgId" th:value="${loginBgImg}">

		<div class="login-container">
			<div style="padding-top: 5%">
			<div class="login-left">
				<div class="left-logo">  </div>
				<div class="title-font"><div> </div></div>
				<div class="bottom-font"><div> </div></div>
			</div>
			<div class="login-right">
					<div class="login-toptitle">欢迎登录</div>
					<div class="line"></div>
					<div>
						<div > <div class="box01"><input type="text" id="tip02" name="username" placeholder="登录用户名"></div></div>
						<div > <div class="box01"><input type="password" id="tip03" name="password" placeholder="登录密码"></div></div>
						<div > <div class="box02"><div class="box02In"><input name="verifyCode" type="text" id="tip04" placeholder="验证码"><img class="yzm" onclick = "this.src='/getKaptchaImage?d='+new Date()*1" src="/getKaptchaImage" ></div></div></div>
					</div>
					<div><div class="login-btn">登录</div></div>
			</div>
			</div>
		</div>
		<script th:inline="javascript"> var ctx = [[@{\/}]] ; </script>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/encrypt.min.js"></script>
<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0"></script>
<!-- jQuery Validation plugin javascript-->
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/messages_zh.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        console.log(ctx);
        validateRule();
        // $("#login-body-id").attr('style','background:'+$("#loginBgImgId").val());
        var path = $("#loginBgImgId").val();
        $("#login-body-id").css("background-image","url("+path+")").css(" background-repeat","no-repeat").css('background-size','100% 100%');
    });


    $(".login-btn").click(function(){
    	  login();
    })

    function login() {
        var password = encrypt($.trim($('#tip03').val()))
        $.ajax({
            type: "POST",
            // url: ctx+"login",
			url: "login",
            data: {
                username:$.trim($('#tip02').val()),
                password: password,
                verifyCode: $.trim($('#tip04').val())
            },
            success: function (r) {
                if (r.code == 0) {
                    parent.location.href = '/index';
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                },
                verifyCode: {
                    required: true
                },
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名"
                },
                password: {
                    required: icon + "请输入您的密码"
                },
                verifyCode: {
                    required: icon + "验证码不能为空"
                },
            }
        })
    }
</script>
	</body>
</html>
